<template>
  <div :style="{height:nowheight , width:nowwidth}">
    <Echart v-if="chartstau" :options="options" />
  </div>
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    zhinterval: {
      type: String || Number,
      default: () => "auto"
    },
    zhrotate: {
      type: String,
      default: () => "0"
    },
    isshowleg: {
      type: Boolean,
      default: () => false
    },
    nowwidth: {
      type: String,
      default: () => "300px"
    },
    nowheight: {
      type: String,
      default: () => "300px"
    },
    cdata: {
      type: Object,
      default: () => ({})
    },
    fontcolor: {
      type: String,
      default: () => "#000"
    },
    fontSize: {
      type: Number,
      default: () => 18
    }
  },
  data() {
    return {
      chartstau: true,
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          dataZoom: [
            // 1.横向使用滚动条
            {
              type: "slider", // 有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
              show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
              start: 0, // 数据窗口范围的起始百分比0-100
              end: 100, // 数据窗口范围的结束百分比0-100
              xAxisIndex: [0], // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
              bottom: 14, // 距离底部的距离
              height: 16, //
              borderColor: "#3591eb",
              fillerColor: "#67aaec"
              // zoomLock: true
            },
            // 2.在内部可以横向拖动
            {
              type: "inside", // 内置于坐标系中
              start: 0, // 数据窗口范围的起始百分比0-100
              end: 100, // 数据窗口范围的结束百分比0-100
              xAxisIndex: [0]
            }
            // // 3.纵向使用滚动条
            // {
            //   type: 'slider',
            //   show: true,
            //   yAxisIndex: [0], // 设置组件控制的y轴
            //   left: '93%', // 距离左侧的距离 可以使百分比，也可以是像素 left: '30'（30像素）
            //   start: 29,
            //   end: 36
            // },
            // // 4.在内部可以纵向拖动
            // {
            //   type: 'inside',
            //   yAxisIndex: [0],
            //   start: 29,
            //   end: 36
            // }
          ],
          color: [
            "#3591eb",
            "#5B8FF9",
            "#F6BD16",
            "#ffdb5c",
            "#ff9f7f",
            "#32c5e9",
            "#fb7293",
            "#e7bcf3"
          ],
          tooltip: {
            show: true, // 是否显示
            trigger: "axis", // 触发类型  'item'图形触发:散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none':什么都不触发。
            axisPointer: {
              // 坐标轴指示器配置项。
              type: "line", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: "auto", // 指示器的坐标轴。
              snap: true // 坐标轴指示器是否自动吸附到点上
            },
            // showContent: true, //是否显示提示框浮层，默认显示。
            // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
            // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
            renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
            confine: true,
            backgroundColor: "rgba(50,50,50,0)", // 提示框浮层的背景颜色。
            // : '100%', // 提示框浮层的背景颜色。
            borderColor: "#333", // 提示框浮层的边框颜色。
            borderWidth: 0, // 提示框浮层的边框宽。
            padding: 5, // 提示框浮层内边距，
            textStyle: {
              // 提示框浮层的文本样式。
              color: this.fontcolor,
              fontStyle: "normal",
              fontWeight: "normal",
              fontFamily: "sans-serif",
              fontSize: 14
            },
            formatter: function(params) {
              var relVal = params[0].name;
              // console.log(params)
              for (var i = 0, l = params.length; i < l; i++) {
                relVal +=
                  "<br/>" +
                  params[i].marker +
                  params[i].seriesName +
                  " : " +
                  params[i].value +
                  "" +
                  (newData.unitName || "");
              }
              return relVal;
            }
          },
          toolbox: {
            show: true
          },
          grid: {
            left: "16",
            right: "50",
            bottom: "40",
            top: "40",
            containLabel: true
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            boundaryGap: true,
            name: newData.xAxisName,
            data: newData.xAxisdata,
            axisLabel: {
              showMinLabel: true,
              showMaxLabel: true,
              interval: this.zhinterval,
              rotate: this.zhrotate,
              margin: 10,
              fontSize: this.fontSize,
              color: this.fontcolor
            },
            nameTextStyle: {
              color: this.fontcolor,
              fontSize: "20px"
            }
          },
          yAxis: [
            {
              position: "left",
              type: "value",
              name: newData.yAxisName,
              axisLabel: {
                fontSize: 10,
                color: this.fontcolor
              },
              nameTextStyle: {
                color: this.fontcolor,
                fontSize: "18px"
              },
              minInterval: 1,
              min: 0
            }
          ],
          calculable: true,
          legend: {
            show: this.isshowleg,
            orient: "horizontal",
            icon: "circle",
            bottom: 0,
            x: "center",
            data: newData.xData
            // axisLabel: {
            //   color: "#fff"
            // }
            // selected: true
            // textStyle: {
            //   color: "#fff"
            // }
          },
          series: newData.seriesData
        };
      },
      immediate: true,
      deep: true
    },
    // 应为最内层的高度固定为百分之百，所以写这里
    nowheight: {
      handler(e) {
        this.nowheights = e;
        this.resetsty();
      },
      deep: true
    }
  },
  methods: {
    // 重置样式
    resetsty() {
      // alert("jkjk")
      this.chartstau = false;
      this.$nextTick(() => {
        this.chartstau = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
